<template>
  <div class="wrapper" @click.stop>
    <div class="block">
      <van-form @submit="onSubmit">
        <div data-v-7dcc6968="" class="title-text">登录拉勾教育</div>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[
            { required: true, message: '请填写手机号' },
            { pattern: /^1[34578][0-9]{9}$/, message: '请输入正确的手机号' },
            ]"
          label-width="50"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          label-width="50"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line
import { Login } from '@/services/user';
import store from '@/store';

export default {
  name: 'UserLogin',
  created() {
  },
  data() {
    return {
      phone: '18201288771',
      password: '111111',
    };
  },
  methods: {
    async onSubmit(values) {
      const { data } = await Login(values);
      console.log(data);
      if (data.state === 1) {
        store.commit('setUser', data.content);
        this.$emit('login-event', true);
        this.$toast.fail('登录成功');
      } else {
        this.$toast.fail('登录失败');
      }
    },
  },
};
</script>

<style lang='less' scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
}
.van-form {
  padding: 30px;
}
.title-text {
  color: #333;
  font-weight: 500;
  text-align: center;
  font-size: .453rem;
  margin-bottom: 0.587rem;
}

.van-button {
  background:linear-gradient(90deg,hsla(48,97%,74%,.5),rgba(251,197,70,.5));
  border: none;
  color: #333;
}
</style>
